<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>排片管理</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <style>
        *{
            padding: 0px;
            margin: auto;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-main>
            <div class="c900 h100 flex" style="flex-direction: column; background-color: #fff">
                <el-form :inline="true" style="width: 100%" >
                    <el-form-item label="电影名">
                        <el-input v-model="scheduleWhere.movieame" placeholder="请输入电影名"></el-input>
                    </el-form-item>
                    <el-form-item label="影厅地点">
                        <el-select  placeholder="请选择影厅地点" v-model="scheduleWhere.hid">
                            <el-option label="全部" value="0"></el-option>
                            <el-option v-for="h in halls" :label="h.name" :value="h.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="ReQuery">查询</el-button>
                        <el-button type="primary" @click="showEditor = true">排片</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="schedules.records" style="width: 100%; flex-grow: 1" >
                    <el-table-column prop="movie.name" label="电影名" show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="start" label="放映开始时间" show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="end" label="放映结束时间" show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="hall.name" label="影厅地点" show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="price" label="价格(元)" show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="leftTicket" label="总票数" show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="" label="修改" >
                        <template slot-scope="scope">
                            <el-button  type="text" size="small" @click="mod(scope.row)">编辑</el-button>
                            <el-popconfirm
                                    confirm-button-text='确定'
                                    cancel-button-text='取消'
                                    icon="el-icon-info"
                                    icon-color="red"
                                    title="确定要删除该排片吗？"
                                    @confirm="del(scope.row)">
                                <el-button slot="reference"  type="text" size="small">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination style="text-align: right; width: 100%;margin-bottom: 10px"
                               background
                               :page-size="5"
                               layout="prev, pager, next"
                               :total="schedules.total" @current-change="queryPage">
                </el-pagination>
            </div>
        </el-main>
        <el-dialog title="添加排片" :visible.sync="showEditor" @close="schedule = {id:'',hid:'',mid:'',start:'',end:'',price:'',leftTicket:''};mname = ''">
            <el-form :inline="true" label-position="left" style="flex:none;">
                <el-form-item label="电影名称：" :label-width="100">
                    <el-tooltip content="请输入已上映的电影" placement="top" :disabled="disabled" :value="visiable">
                        <el-input placeholder="请输入电影名" v-model="mname" @blur="isUpmovie"></el-input>
                    </el-tooltip>

                </el-form-item>
                <el-form-item label="影厅地点：" :label-width="100">
                    <el-select placeholder="请选择影厅地点" v-model="schedule.hid">
                        <el-option v-for="h in halls" :label="h.name" :value="h.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-form :inline="true" label-position="left" style="flex:none;">
                <el-form-item label="放映时长:" label-width="80px">
                    <el-date-picker   type="datetime" placeholder="选择开始时间" @blur="handleBlur" style="width: 206px" v-model="schedule.start">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="至:" label-width="80px">
                    <el-date-picker  type="datetime" placeholder="选择结束时间" style="width: 206px" v-model="schedule.end">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <el-form :inline="true" label-position="left" style="flex:none;">
                <el-form-item label="销票价格(元)：" :label-width="100">
                    <el-input placeholder="请输入价格" v-model="schedule.price"></el-input>
                </el-form-item>
                <el-form-item label="总票数：" :label-width="100">
                    <el-input placeholder="请设置总票数" v-model="schedule.leftTicket"></el-input>
                </el-form-item>
            </el-form>
            <el-table :data="movies" height="250">
                <el-table-column property="name" label="电影名称" show-overflow-tooltip="true"></el-table-column>
                <el-table-column property="type" label="电影类别" show-overflow-tooltip="true"></el-table-column>
                <el-table-column property="length" label="电影时长" show-overflow-tooltip="true"></el-table-column>
                <el-table-column property="status" label="电影状态" show-overflow-tooltip="true"></el-table-column>
                <el-table-column align="right">
                    <template slot="header" slot-scope="scope">
                        <el-input v-model="search" size="mini" @change="select" placeholder="输入关键字搜索"/>
                    </template>
                    <template slot-scope="scope">
                        <el-button  type="text" size="small" @click="schedule.mid = scope.row.id;mname = scope.row.name ">添加</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showEditor = false">取 消</el-button>
                <el-button type="primary" @click="addSchedule">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="编辑排片信息" :visible.sync="showEditor2" @close="schedule = {id:'',hid:'',mid:'',start:'',end:'',price:'',leftTicket:''};mname = ''">
            <el-form :inline="true" label-position="left" style="flex:none;">
                <el-form-item label="电影名称：" :label-width="100">
                    <el-tooltip content="请输入已上映的电影" placement="top" :disabled="disabled" :value="visiable">
                        <el-input placeholder="请输入电影名" v-model="mname" @blur="isUpmovie"></el-input>
                    </el-tooltip>

                </el-form-item>
                <el-form-item label="影厅地点：" :label-width="100">
                    <el-select placeholder="请选择影厅地点" v-model="schedule.hid">
                        <el-option v-for="h in halls" :label="h.name" :value="h.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-form :inline="true" label-position="left" style="flex:none;">
                <el-form-item label="放映时长:" label-width="80px">
                    <el-date-picker  type="datetime" placeholder="选择开始时间" @blur="handleBlur" style="width: 206px" v-model="schedule.start">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="至:" label-width="80px">
                    <el-date-picker type="datetime" placeholder="选择结束时间"  style="width: 206px" v-model="schedule.end">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <el-form :inline="true" label-position="left" style="flex:none;">
                <el-form-item label="销票价格(元)：" :label-width="100">
                    <el-input placeholder="请输入价格" v-model="schedule.price"></el-input>
                </el-form-item>
                <el-form-item label="总票数：" :label-width="100">
                    <el-input placeholder="请设置总票数" v-model="schedule.leftTicket"></el-input>
                </el-form-item>
            </el-form>
            <el-table :data="movies" height="250">
                <el-table-column property="name" label="电影名称" show-overflow-tooltip="true"></el-table-column>
                <el-table-column property="type" label="电影类别" show-overflow-tooltip="true"></el-table-column>
                <el-table-column property="length" label="电影时长" show-overflow-tooltip="true"></el-table-column>
                <el-table-column property="status" label="电影状态" show-overflow-tooltip="true"></el-table-column>
                <el-table-column align="right">
                    <template slot="header" slot-scope="scope">
                        <el-input v-model="search" size="mini" @change="select" placeholder="输入关键字搜索"/>
                    </template>
                    <template slot-scope="scope">
                        <el-button  type="text" size="small" @click="schedule.mid = scope.row.id;mname = scope.row.name ">添加</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showEditor2 = false">取 消</el-button>
                <el-button type="primary" @click="modSchedule">确 定</el-button>
            </div>
        </el-dialog>
    </div>
<script>
    let v = new Vue({
        el:'#app',
        data:{
            movies:[],
            showEditor:false,
            showEditor2:false,
            search:'',
            halls:[],
            schedule:{id:'',hid:'',mid:'',start:'',end:'',price:'',leftTicket:''},
            mname:'',
            visiable:false,
            disabled:true,
            schedules:{current:1,size:5,records: [],total:0},
            scheduleWhere:{movieame:'',hid:''}
        },
        methods:{
            mod(row){
                this.showEditor2 = true;
                this.mname = row.movie.name;
                this.schedule.mid = row.movie.id;
                this.schedule.id = row.id;
                this.schedule.hid = row.hall.id;
                this.schedule.start = row.start;
                this.schedule.end = row.end;
                this.schedule.price = row.price;
                this.schedule.leftTicket = row.leftTicket;
            },
            del(row){
                axios.get("../schedule/delSchedule",{
                    params:{
                        id:row.id
                    }
                }).then(res=>{
                    if (res.data.code == 1){
                        this.$message(res.data.msg);
                        this.querySchedules();
                    }else{
                        this.$alert(res.data.msg);
                    }
                })
            },
            handleBlur(){
                let date = new Date(this.schedule.start);
                if (this.schedule.mid){
                    let movie = this.movies.find(m=>m.id == this.schedule.mid);
                    let movieLength = parseInt(movie.length.replace("分钟", ""),10);
                    date.setMinutes(date.getMinutes() + movieLength)
                    this.schedule.end = date;
                }
            },
            queryMovies(){
                axios.get("../schedule/queryMovies",{
                    params:{
                        search:this.search
                    }
                }).then(res=>{
                    res.data.forEach(m=>{
                        m.name = m.name.replace(m.name.lastIndexOf(" "),"");
                        m.status = m.status == 1 ? '已上映':'已排片';
                    })
                    this.movies = res.data;
                })
            },
            select(){
                this.queryMovies();
            },
            queryHalls(){
                axios.get("../schedule/queryHalls").then(res=>{
                    res.data.forEach(h=>{
                        h.name = h.studios.name+ " " +  h.name + " " + h.addr + " " + h.type  ;
                    })
                    this.halls = res.data;
                })
            },
            isUpmovie(){
                if (this.movies.find(m => m.name == this.mname)) {
                    this.schedule.mid = this.movies.find(m => m.name == this.mname).id;
                    this.disabled = true;
                    this.visiable = false;
                }else{
                    this.disabled = false;
                    this.visiable = true;
                }
            },
            addSchedule(){
                this.schedule.start = this.schedule.start.toLocaleString("zh-CN", {
                    year: 'numeric',
                    month: '2-digit',
                    day: '2-digit',
                    hour: '2-digit',
                    minute: '2-digit',
                    second: '2-digit',
                    hour12: false});
                var parts =  this.schedule.start.split(' ');
                var datePart = parts[0];
                var timePart = parts[1];

                datePart = datePart.replace(/\//g, '-');

                this.schedule.start = datePart + 'T' + timePart + '.000Z';

                this.schedule.end = this.schedule.end.toLocaleString("zh-CN", {
                    year: 'numeric',
                    month: '2-digit',
                    day: '2-digit',
                    hour: '2-digit',
                    minute: '2-digit',
                    second: '2-digit',
                    hour12: false});
                parts =  this.schedule.end.split(' ');
                datePart = parts[0];
                timePart = parts[1];

                datePart = datePart.replace(/\//g, '-');

                this.schedule.end = datePart + 'T' + timePart + '.000Z';
               axios.post("../schedule/addSchedule",this.schedule).then(res=>{
                   if (res.data.code == 1){
                       this.$message(res.data.msg);
                       this.showEditor = false;
                       this.mname='';
                       this.schedule = {id:'',hid:'',mid:'',start:'',end:'',price:'',leftTicket:''}
                       this.querySchedules();
                   }else{
                       this.$alert(res.data.msg);
                   }
               });
            },
            modSchedule(){
                let date = new Date(this.schedule.start);
                this.schedule.start = date.toISOString().replace(' ', 'T').substring(0, 19);
                date = new Date(this.schedule.end);
                this.schedule.end = date.toISOString().replace(' ', 'T').substring(0, 19);
                axios.post("../schedule/modSchedule",this.schedule).then(res=>{
                    if (res.data.code == 1){
                        this.$message(res.data.msg);
                        this.showEditor2 = false;
                        this.mname='';
                        this.schedule = {id:'',hid:'',mid:'',start:'',end:'',price:'',leftTicket:''}
                        this.querySchedules();
                    }else{
                        this.$alert(res.data.msg);
                    }
                });
            },
            querySchedules(){
                axios.get("../schedule/querySchedules",{
                    params:{
                        movieame: this.scheduleWhere.movieame,
                        hid: this.scheduleWhere.hid,
                        current:this.schedules.current,
                        size: this.schedules.size
                    }
                }).then(res=>{
                    this.schedules.records = res.data;
                    this.schedules.total = res.data[res.data.length - 1].total;
                    this.schedules.records.pop();
                    this.schedules.records.forEach(s=>{
                        // 解析时间
                        s.hall.name = s.hall.studios.name+ " " + s.hall.name + " " +  s.hall.addr + " " +  s.hall.type;
                        s.start = s.start.replace("T"," ");
                        s.end = s.end.replace("T"," ");

                    });
                })
            },
            queryPage(pageNum){
                this.schedules.current = pageNum;
                this.querySchedules();
            },
            ReQuery(){
                //有搜索条件时，将页号置为1并清空原来的，重新查询
                this.schedules.current = 1;
                this.schedules.records = [];
                this.querySchedules();
            },
        },
        created(){
           this.queryMovies();
            this.queryHalls();
            this.querySchedules();
        }
    })
</script>
</body>
</html>